<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单查询</title>
</head>
<link href="/css/bootstrap.css" rel="stylesheet">
<script src="/js/jquery-2.1.4.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/bootstrap.js"></script>
<style>
    #tb {
        text-align: center;
        font-size: small;
    }
</style>
<body>
<div id="div">
    <table class="table table-striped table-hover table-bordered" id="tb">
        <thead>
        <tr>
            <td width="20%">商品名称</td>
            <td width="17%">商品属性</td>
            <td width="4%">购买数量</td>
            <td width="4%">总价</td>
            <td width="5%">运费</td>
            <td width="10%">店铺名称</td>
            <td width="13%">发货地址</td>
            <td width="12%">收货地址</td>
            <td width="10%">订单生成时间</td>
            <td width="5%">订单状态</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(order,index) in orders">
            <td v-text="order.productName"></td>
            <td v-text="order.property"></td>
            <td v-text="order.number"></td>
            <td v-text="order.money"></td>
            <td v-text="order.freight"></td>
            <td v-text="order.storeName"></td>
            <td v-text="order.shipAddress"></td>
            <td v-text="order.address"></td>
            <td v-text="order.time"></td>
            <td v-text="order.status==1?'待付款':order.status==2?'待发货':order.status==3?'待收货':order.status==4?
                '待评价':order.status==5?'已取消':'已完成'"></td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="10">
                <div>
                    总共<span v-text="page.dataCount"></span>条订单&nbsp;&nbsp;&nbsp;
                    当前是第<span v-text="page.pageIndex"></span>页&nbsp;&nbsp;&nbsp;
                    总共有<span v-text="page.pageCount"></span>页&nbsp;&nbsp;&nbsp;
                    <a href="javascript:" @click="prev()">上一页</a>&nbsp;&nbsp;&nbsp;
                    <a href="javascript:" @click="next()">下一页</a>&nbsp;&nbsp;&nbsp;
                </div>
            </td>
        </tr>
        </tfoot>
    </table>
</div>

<script type="text/javascript">
    new Vue({
        el: "#div",
        data: {
            orders: [],
            index: 1,
            number:5,
            page: null
        },
        created: function () {
            this.selectAllOrders();
        },
        methods: {
            prev: function () {
                if (this.page.pageIndex == 1) {
                    alert("已经是首页");
                    return;
                }
                this.page.pageIndex = this.page.pageIndex - 1;
                this.index = this.page.pageIndex;
                this.selectAllOrders();
            },
            next: function () {
                if (this.page.pageIndex == this.page.pageCount) {
                    alert("已经是尾页");
                    return;
                }
                this.page.pageIndex = this.page.pageIndex - (-1);
                this.index = this.page.pageIndex;
                this.selectAllOrders();
            },
            selectAllOrders: function () {
                var _this = this;
                $.ajax({
                    url: "/admin/selectOrder",
                    data: {
                        index: _this.index,
                        number: _this.number
                    },
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        _this.orders = data.list;
                        _this.page = data.obj;
// console.log(_this.orderviews[0].status==1?'待付款':_this.orderviews[0].status==2?'待发货':_this.orderviews[0].status==3?'待收货':'待评价');
                    },
                    error: function (data) {
                        alert(data.responseJSON.message);
                    }
                });
            }
        }
    });
</script>
</body>
</html>